<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .alert {
            padding: 15px;
            border: 1px solid #d6e9c6;
            border-radius: 4px;
            color: #3c763d;
            background-color: #dff0d8;
        }
    </style>
</head>

<body>
    <form id="form" name="myForm" onsubmit="console.log('submit'); return false;">
        <p id="p">hello world!</p>
        <input type="text" id="input" value="default" onkeydown="return checkPhoneKey(event.key)">
        <input type="submit" id="submit" value="submit">
    </form>
    <form>
        <input type="text" value="placeholder">
        <br>
        <textarea name="" id="textarea" cols="30" rows="10">
            textarea
        </textarea>
        <br>
        <select onchange="console.log(this.value)">
            <option value="">Select something</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>

    </form>
    <script src="hello word.js"></script>
    <script>
        function checkPhoneKey(key) {
            console.log(key)
            return (key >= '0' && key <= '9') || ['+', '(', ')', '-', 'ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Enter'].includes(key);
        }
    </script>
    <div contentEditable id="elem">Click and <b>edit</b>, please</div>
    <script>
        let observer = new MutationObserver(mutationRecords => {
            console.log(mutationRecords); // console.log(the changes)
        });
        // 观察除了特性之外的所有变动
        observer.observe(elem, {
            childList: true, // 观察直接子节点
            subtree: true, // 及其更低的后代节点
            characterDataOldValue: true // 将旧的数据传递给回调
        });
    </script>
    <iframe name="example" id="iframe" src="http://127.0.0.1:5500/"
        sandbox="allow-forms allow-popups allow-same-origin allow-scripts" style="width:90%;height: 300px;"></iframe>
    <script>
        let oldDoc = iframe.contentDocument;
        console.log('oldDoc', oldDoc)
        iframe.onload = function () {
            let newDoc = iframe.contentDocument;
            console.log('newDoc', newDoc)
            // 加载的文档与初始的文档不同！
            console.log(oldDoc == newDoc); // false

            let win = window.frames.example
            win.postMessage('message from iframe', "http://127.0.0.1:5500/")
            console.log('alert')
        };


        window.onload = () => {
            window.addEventListener("message", function (event) {
                alert(event.origin)
                if (event.origin != 'http://127.0.0.1:5500/') {
                    console.log('not from same origin')
                    return
                }
                alert("received: " + event.data)

            })
        }

    </script>
    <script>
        submit.onclick = () => {

            this.style.fontSize = '36px';
            this.style.color = 'red'
        }
    </script>

    <template id="tmpl">
        <script>
            console.log("template");
        </script>
        <div class="message" style="color:red">template!</div>
    </template>
    <script>
        let elem = document.createElement('div');
        // Clone the template content to reuse it multiple times
        elem.append(tmpl.content.cloneNode(true));
        document.body.append(elem);
    // Now the script from <template> runs
    </script>

</body>

</html>